import React, {useState, useEffect} from 'react'
import { Input, Space, Button, Select, message } from 'antd';
import Nav from '../../components/nav'
import _ from 'lodash';
import { fetchData } from '../../request'
import './index.scss'

const { Option } = Select;

const manageList = {
    "ADMIN": "董事长",
    "GM": "副总",
    "CHAIRMAN": "总监",
    "MANAGE": "经理",
    "SP": "区域经理",
    "STAFF": "店长"
}

const manageData = [
    {key: "ADMIN", value: "董事长"},
    {key: "GM", value: "副总"},
    {key: "CHAIRMAN", value: "总监"},
    {key: "MANAGE", value: "经理"},
    {key: "SP", value: "区域经理"},
    {key: "STAFF", value: "店长"}
]

const Register = props => {

    const [userName, setUserName] = useState('')
    const [password, setPassword] = useState('')
    const [url, setUrl] = useState({})

    let nextPositionNUM =  _.findIndex(manageData, {key: localStorage.getItem('role')});

    const onChangeUserName = e => {
        setUserName(e.target.value)
    }
    const onChangePassword = e => {
        setPassword(e.target.value)
    }

    const onSubmit = e => {
        setUrl({
            method: "post",
            url: "/makeUp/account/register",
            data: {
                userName: userName,
                password: password,
                role: manageData[nextPositionNUM + 1].key,
                parentId: localStorage.getItem('id')
            }
        })
    }
    
    useEffect(() => {
        fetchData(url).then(data => {
            if(data && data.code == 200){
                message.success("创建用户成功")
            }else{
                data && message.error(data && data.msg)
            }
        })
    }, [url])

    return (
        <div className="register-page">
            <div className="bg"></div>
            <Nav backUrl="/member"></Nav>
            <div className="register-box">
                <div style={{marginBottom: 20}}>您的职位：{manageList[localStorage.getItem("role")]}</div>
                <Input size="large" placeholder="userName" onChange={onChangeUserName} />
                <Space direction="vertical">
                    <Input.Password placeholder="password" onChange={onChangePassword} />
                </Space>
                <div style={{marginBottom: 30}}>您能创建的职位为：{manageData[nextPositionNUM + 1].value}</div>
                <Button type="primary" onClick={onSubmit}>提交</Button>
            </div>
        </div>
    )
}

export default Register